<template>
    <div class="accept-transcation">
        <el-card class="box-card accept">
            <div>{{$t("wallet.walletAddress")}}</div>
            <p>
                <span id="msg">{{$route.query.address}}</span>
                <span class="copy" @click="doCopy" data-clipboard-target="#msg"></span>
            </p>
            <div>{{$t("wallet.QRCode")}}</div>
            <p id="qrcode" ref="qrcode"></p>
        </el-card>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import QRCode from 'qrcodejs2'
export default {
    name: "o-wallet-accept-transcation",
    components: {
        QRCode
    },
    data(){
        return{
            
        }
    },
    activated(){
        document.getElementById("qrcode").innerHTML = "";
        this.qrcode()
    },
    methods:{
        doCopy(){
            let clipboard = new Clipboard('.copy');
            //成功回调
            clipboard.on('success', e => {
                this.$message({
                    message: this.$t('wallet.copySuccess'),
                    type: 'success'
                });
                clipboard.destroy()
            });
            //失败回调
            clipboard.on('error', e => {
                this.$message({
                    message: this.$t('wallet.copyFail'),
                    type: 'warning'
                });
                clipboard.destroy()
            });
        },
        qrcode(){
            let qrcode = new QRCode('qrcode',{
                width: 120, // 设置宽度，单位像素
                height: 120, // 设置高度，单位像素
                text: this.$route.query.address   // 设置二维码内容或跳转地址
            })
        }
    }
}
</script>

<style lang="less" scoped>
.accept-transcation{
    position:absolute;
    top:65px;
    bottom:22px;
    left:10px;
    right:10px;
    .accept{
        height: 100%;
        padding-top: 20px;
        padding-left: 20px;
        color:#1A1A1A;
        font-size:12px;
        div{
            font-size:14px;
            margin-bottom:15px;
        }
        p{
            margin-bottom:30px;
            #msg{
                -moz-user-select: text; /*火狐*/
                -webkit-user-select: text; /*webkit浏览器*/
                -ms-user-select: text; /*IE10*/
                -khtml-user-select: text; /*早期浏览器*/
                user-select: text;
            }
            .copy{
                display:inline-block;
                width:16px;
                height:16px;
                background:url(./images/copy.png) no-repeat 0 0;
                background-size:cover;
                margin-left:20px;
                cursor: pointer;
            }
        }
    }
}
</style>
